// Reader Sidebar
.is-group-reader .sidebar {

	overflow-x: hidden;

	@include breakpoint( "<660px" ) {
		z-index: z-index( 'root', '.reader-mobile-sidebar' );
	}

	.sidebar__menu {
		margin-bottom: 8px;

		.selected {
			.menu-link-icon,
			.sidebar__menu-action .gridicon,
			.sidebar-dynamic-menu-action-icon {
				fill: $gray;
			}

			.sidebar-streams__edit-icon {
				fill: $white;
			}
		}

		.is-action-button-selected {
			background-color: $gray-light;

			.gridicon {
				fill: darken( $gray, 20% );
			}

			.sidebar__menu-item-label, .menu-link-text {
				color: $gray-dark;
			}

			.sidebar__button {
				background-color: darken( $gray, 10% );
				color: $white;
			}
		}

		.sidebar-streams__team {
			margin-top: -1px; // Removes extra top border in team subs for <480px
		}
	}

	.is-togglable {

		@include breakpoint( "<660px" ) {
			margin-top: 0;
		}

		.sidebar__heading {
			margin: 0;
			padding: 10px 16px 10px 55px;
			cursor: pointer;
			position: relative;
			transition: background-color 0.15s ease-in-out,
				box-shadow 0.15s ease-in-out;

			.gridicon {
				top: 10px;
				left: 20px;
				height: 16px; // Smaller than recommended for gridicon, but works here
				transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			}

			.count {
				margin-left: 8px;
			}

			&:hover {
				color: $blue-medium;
				background-color: $gray-light;

				.gridicon {
					fill: $blue-medium;
				}
			}
		}

		.sidebar__menu-list,
		.sidebar__menu-empty {
			height: 0;
			overflow: hidden;
		}

		.sidebar__menu-item {
			transition: transform 0.15s cubic-bezier(0.230, 1.000, 0.320, 1.000),
				opacity 0.15s ease-in-out;
			transition-delay: 0.05s;
			opacity: 0;
			transform: translateY( -100px );
		}

		&.is-toggle-open {
			.sidebar__heading {
				background-color: $gray-light;
				box-shadow: 0 1px 0 lighten( $gray, 20 ),
					0 -1px 0 lighten( $gray, 20 );

				.gridicon {
					transform: rotate( 180deg );
				}
			}

			.sidebar__menu-add-button {
				opacity: 1;
				pointer-events: auto;
				transform: translateX( 0 );
			}

			.sidebar__menu-list,
			.sidebar__menu-empty {
				height: auto;
				padding-top: 8px;
				padding-bottom: 8px;
			}

			.sidebar__menu-item {
				opacity: 1;
				transform: translateY( 0 );

				.add-new {
					background: $white;
					border: 1px solid lighten( $gray, 20% );
					border-radius: 3px;
					color: darken( $gray, 10% );
					font-size: 11px;
					padding: 6px 7px;
					position: absolute;
						top: 2px;
						right: 8px;
					text-transform: none;
				}
			}

			.sidebar__menu-list {

				.sidebar__menu-item,
				.sidebar-dynamic-menu__tag {

					@include breakpoint( "<660px" ) {
						background: none;
						border-top: 0;
					}
				}

				li {

					&:first-child {
						@include breakpoint( "<660px" ) {
							margin-top: -5px;
						}
					}

					&:last-child {
						@include breakpoint( "<660px" ) {
							border-bottom: 1px solid rgba( 200, 215, 225, .5 );
						}
					}
				}
			}
		}

		.is-add-open {
			.sidebar__menu-add {
				opacity: 1;
				pointer-events: auto;
				transform: translateX( 0 );
			}
		}
	}

	.sidebar__menu-empty,
	.sidebar__menu-empty:hover {
		max-width: 60%;
		padding-right: 32px;
		padding-left: 55px;
		font-size: 13px;
		color: $gray-dark;
		background-color: transparent !important; // needs to be more specific
	}

	.sidebar__menu-item {

		a.sidebar__button {
			margin-top: 5px;

			@include breakpoint( "<660px" ) {
				margin-top: 10px;
			}
		}
	}

	.sidebar__menu-item-label {
		padding: 8px 16px 8px 55px;

		&::after {
			@include long-content-fade( $color: lighten( $gray, 30% ), $size: 20px );
			padding-right: 50px;
		}

		.sidebar__menu-item-tagname {

			&::after {
				@include long-content-fade( $color: lighten( $gray, 30% ), $size: 20px );
				right: 60px;
			}
		}

		.sidebar__menu-item-tagname {

			&::after {
				right: 20px;
			}
		}
	}

	.sidebar__menu-add-button {
		position: absolute;
			top: 7px;
			right: 8px;
		border-width: 1px;
		border-color: lighten( $gray, 20% );
		padding: 6px 7px;
		border-radius: 3px;
		text-transform: none;

		// Disabled by default
		opacity: 0;
		transform: translateX( -20px );
		pointer-events: none;
		transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition-delay: 0.05s;
	}

	.sidebar__menu-add {
		opacity: 0;
		//transform: translateX( 100px );
		transition: all 0.15s ease-in;
		pointer-events: none;
		padding: 0;
		position: absolute;
			top: -1px;
			left: -1px;
			right: -1px;

		input {
			font-size: 13px;
			padding: 10px 24px 9px;
		}

		.gridicon {
			cursor: pointer;
			position: absolute;
				top: 0;
				right: 0;
				left: auto;
			padding: 8px 13px;
		}
	}

	.selected {
		.sidebar__menu-action {
			.gridicon {
				fill: #fff !important;
			}
		}
	}

	.sidebar__menu-action {
		position: absolute;
			top: 3px;
			right: 8px;
		line-height: 15px;
		padding: 3px 4px 2px 4px;

		.gridicon {
			position: relative;
				top: 0;
				left: auto;
			fill: $gray !important; // this needs to be more specific
		}


		&:hover {
			cursor: pointer;

			.gridicon {
				fill: $alert-red !important; // this needs to be more specific
			}
		}

		@include breakpoint( "<660px" ) {
			top: -40px;

			.gridicon {
				top: 6px;
			}
		}
	}

	.sidebar__menu-action-label,
	.sidebar-dynamic-menu-action_label {
		display: none;
	}
}
